<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div class="app-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="time">17:09</div>
            <div class="status-icons">
                <i class="fas fa-bell-slash"></i>
                <i class="fab fa-bluetooth-b"></i>
                <i class="fas fa-wifi"></i>
                <span class="network-signal">x</span>
                <div class="battery">
                    <span>100</span>
                    <i class="fas fa-bolt"></i>
                </div>
            </div>
        </div>

        <!-- 导航栏 -->
        <div class="nav-tabs">
            <div class="tab active">推荐</div>
            <div class="tab">乐馆</div>
            <div class="tab">听书</div>
            <div class="tab">故事</div>
            <div class="tab">雁回时</div>
            <div class="tab">金币</div>
        </div>

        <!-- 搜索框 -->
        <div class="search-container">
            <div class="search-box">
                <i class="fas fa-search"></i>
                <span class="search-text">张信哲 正在热搜</span>
            </div>
            <div class="voice-search">
                <img src="images/voice-search.svg" alt="语音搜索">
            </div>
        </div>

        <!-- 欢迎语 -->
        <div class="greeting">
            <h2>hi 今日为你打造</h2>
        </div>

        <!-- 推荐卡片区域 -->
        <div class="card-scroll">
            <div class="card afternoon-tea">
                <div class="card-content">
                    <h3>下午茶</h3>
                    <p>解锁21世纪</p>
                    <p>最in最潮...</p>
                    <div class="play-button">
                        <i class="fas fa-play"></i>
                    </div>
                </div>
                <div class="card-image">
                    <img src="images/album-cover-1.svg" alt="走在冷雨中">
                    <div class="playing-indicator"></div>
                </div>
            </div>
            
            <div class="card daily-playlist">
                <div class="card-content">
                    <h3>手心的蔷薇-林俊杰</h3>
                    <p>每日30首</p>
                </div>
                <div class="card-image">
                    <img src="images/album-cover-2.svg" alt="林俊杰">
                    <div class="play-button-overlay">
                        <i class="fas fa-play"></i>
                    </div>
                </div>
            </div>

            <div class="card recommend">
                <div class="card-content">
                    <h3>推荐</h3>
                    <p>快来听...</p>
                </div>
                <div class="card-image">
                    <img src="images/album-cover-3.svg" alt="推荐">
                </div>
            </div>
        </div>

        <!-- 大家都在听部分 -->
        <div class="popular-section">
            <div class="section-header">
                <h2>大家都在听</h2>
                <div class="play-all-button">
                    <i class="fas fa-play"></i>
                </div>
            </div>

            <!-- 歌曲列表 -->
            <div class="song-list">
                <div class="song-item">
                    <div class="song-cover">
                        <img src="images/album-cover-4.svg" alt="跳楼机">
                    </div>
                    <div class="song-info">
                        <div class="song-title">跳楼机</div>
                        <div class="song-subtitle">流行指数榜No.94</div>
                        <div class="song-artist">刘大拿-跳楼机 (女版)</div>
                    </div>
                    <div class="song-likes">
                        <i class="far fa-heart"></i>
                        <span>5w+</span>
                    </div>
                </div>

                <div class="song-item">
                    <div class="song-cover">
                        <img src="images/album-cover-5.svg" alt="赤伶">
                    </div>
                    <div class="song-info">
                        <div class="song-title">赤伶</div>
                        <div class="song-subtitle">腾讯音乐由你榜历史上榜</div>
                        <div class="song-artist">扶乘令-赤伶 (正式版)</div>
                    </div>
                    <div class="song-likes">
                        <i class="far fa-heart"></i>
                        <span>350w+</span>
                    </div>
                </div>

                <div class="song-item">
                    <div class="song-cover">
                        <img src="images/album-cover-6.svg" alt="只为你着迷">
                    </div>
                    <div class="song-info">
                        <div class="song-title">只为你着迷 (深情版)</div>
                        <div class="song-artist">李秉成-只为你着迷</div>
                    </div>
                    <div class="song-likes">
                        <i class="far fa-heart"></i>
                        <span>10w+</span>
                    </div>
                </div>

                <div class="song-item">
                    <div class="song-cover">
                        <img src="images/album-cover-7.svg" alt="春庭雪">
                    </div>
                    <div class="song-info">
                        <div class="song-title">春庭雪</div>
                        <div class="song-artist">邓雪君(等什么君)-春庭雪</div>
                    </div>
                    <div class="song-likes">
                        <i class="far fa-heart"></i>
                        <span>1400w+</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部控制区域容器 -->
        <div class="bottom-controls-container">
            <!-- 底部播放条 -->
            <div class="bottom-player">
                <div class="mini-player">
                    <div class="mini-cover">
                        <img src="images/mini-cover.svg" alt="走在冷雨中">
                    </div>
                    <div class="mini-info">
                        <div class="mini-title">走在冷雨中 (粤语版) - 车厘子的车车</div>
                    </div>
                    <div class="mini-controls">
                        <i class="fas fa-play"></i>
                        <i class="fas fa-bars"></i>
                    </div>
                </div>
            </div>

            <!-- 底部导航 -->
            <div class="bottom-nav">
                <div class="nav-item active">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-play-circle"></i>
                    <span>直播</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-search"></i>
                    <span>搜索</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-comments"></i>
                    <span>社区</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>
</html>
